<template>
	<view class="content">
		<view class="brand">
		<view class="distance">
			<text>品牌</text>
			<u-icon name="arrow-down" size="16" class="arrow-right" color="#333333"></u-icon>
		</view>
		<view class="distance">
			<text>分类</text>
			<u-icon name="arrow-down" size="16" class="arrow-right" color="#333333"></u-icon>
		</view>
	</view>
	<view class="shopping" >
		<image src="" mode=""></image>
		<view class="shop-right">
			<text>肯德基香辣鸡腿堡抵用券20元
			</text>
			<text>可全额兑换香辣鸡腿堡一个.</text>
			<view class="">
				<view class="poin">
					2000<text>分</text>
				</view>
				<text class="sell">已售12.6W件</text>
			</view>
		</view>
		</view>
	</view>
	
</template>

<script>
</script>

<style scoped lang="scss">
	.content{
		padding: 24rpx;
	}
	.brand{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.distance{
		width: 49%;
		background: #F6F9FC;
		border: 1rpx solid #CCCCCC;
		border-radius: 8rpx;
		padding: 22rpx 24rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.shopping{
		border: 1rpx solid #CCCCCC;
		box-shadow: 0 6rpx 20rpx 0 #99999933;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		image{
			width: 200rpx;
			height: 200rpx;
			display: block;
			background: #1677FE;
		}
		.shop-right{
			display: flex;
			flex: 1;
			flex-direction: column;
			margin-left: 24rpx;
			text:nth-of-type(2){
				font-size: 24rpx;
				color: #999999;
				margin: 16rpx 0 71rpx;
			}
			view{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.poin{
					font-size: 36rpx;
					color: #FE6000;
					font-weight: 700;
					text{
						font-size: 24rpx;
						font-weight: normal;
					}
				}
				.sell{
					font-size: 20rpx;
					color: #999999;
				}
			}
		}
	}
</style>